<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录/注册</title>

    <!-- 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- 样式文件 -->
    <link rel="stylesheet" href="/css/indexStyle.css">
    <link rel="stylesheet" href="/css/message.css">
    <link rel="stylesheet" href="/css/bg.css">


</head>
<body>
<div class="container"></div>
<div id="messageBox" style="display:none;
 position:fixed;
 top:20px;
 left:50%; transform:translateX(-50%); background-color:#f8d7da; color:black; padding:15px; border-radius:5px; z-index:1000; width:300px; text-align:center;">
    <span id="messageText"></span>
</div>


<div class="login-container">
    <h1>欢迎使用云借阅图书平台</h1>

    <!-- 单选按钮（登录 / 注册） -->
    <div class="radio-inputs">
        <label class="radio">
            <input checked name="auth" type="radio" id="loginRadio" />
            <span class="radio-item">登录</span>
        </label>
        <label class="radio">
            <input name="auth" type="radio" id="registerRadio" />
            <span class="radio-item">注册</span>
        </label>
    </div>

    <br>


    <!-- 登录区块 -->
    <div class="login-section" id="loginSection">
        <div class="header">
            <div class="logo"><i class="fas fa-user"></i></div>
            <h1>用户登录</h1>
            <p class="subtitle">请输入您的邮箱和密码</p>
        </div>
        <form id="loginForm">
            <div class="form-group">
                <label for="email">邮箱</label>
                <div class="input-container">
                    <input type="text" id="email" placeholder="邮箱" required>
                    <i class="fas fa-user input-icon"></i>
                </div>
            </div>

            <div class="form-group">
                <label for="password">密码</label>
                <div class="input-container">
                    <input type="password" id="password" placeholder="请输入您的密码" required>
                    <i class="fas fa-lock input-icon"></i>
                </div>
            </div>

            <div class="box-button">
                <div class="button"><span>登录</span></div>
            </div>
        </form>
    </div>

    <!-- 注册区块 -->
    <div class="register-section" id="registerSection" style="display: none;">
        <div class="header">
            <div class="logo"><i class="fas fa-user-plus"></i></div>
            <h1>创建新账户</h1>
            <p class="subtitle">请输入您的注册信息</p>
        </div>

        <form id="registerForm">
            <!--            <div class="form-group">-->
            <!--                <label for="regUsername">用户名</label>-->
            <!--                <div class="input-container">-->
            <!--                    <input type="text" id="regUsername" placeholder="请输入用户名" required>-->
            <!--                    <i class="fas fa-user input-icon"></i>-->
            <!--                </div>-->
            <!--            </div>-->

            <div class="form-group">
                <label for="regEmail">邮箱</label>
                <div class="input-container">
                    <input type="text" id="regEmail" placeholder="请输入邮箱" required>
                    <i class="fas fa-envelope input-icon"></i>
                </div>
            </div>

            <div class="form-group">
                <label for="regPassword">密码</label>
                <div class="input-container">
                    <input type="password" id="regPassword" placeholder="请输入密码" required>
                    <i class="fas fa-lock input-icon"></i>
                </div>
            </div>

            <div class="form-group">
                <label for="regConfirmPassword">确认密码</label>
                <div class="input-container">
                    <input type="password" id="regConfirmPassword" placeholder="请确认密码" required>
                    <i class="fas fa-lock input-icon"></i>
                </div>
            </div>

            <div class="box-button">
                <div class="button"><span>注册</span></div>
            </div>
        </form>
    </div>
</div>
<!-- JS文件 -->
<script src="/js/indexScript.js"></script>
<script src="/js/config.js"></script>
<script src="/js/validation.js"></script>
<script src="/js/message.js"></script>
</body>
</html>
